﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link href="../css/quote2.css" rel="stylesheet" type="text/css" />
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .rtq-msg{border:1px solid #ccc;border-width:1px 0;pading:0;background:#ffc;position:absolute;top:20%;left:30%;z-index:9999;}
        .rtq-msg *{padding:0;margin:0;}
        .rtq-msg-wrap{border:1px solid #ccc;border-width:0 1px;margin:0 -1px;min-width:200px;_width:200px;_position:relative;}
        .rtq-msg-title{position:relative;padding:3px 6px;}
        .rtq-msg-title .rtq-msg-close{position:absolute;right:5px;top:5px;background:url(IM/btn_close.gif) no-repeat 0 0;border:1px solid #fff;height:10px;width:10px;overflow:hidden;text-indent:-999em;cursor:pointer;}
        .rtq-msg-title .rtq-msg-close:hover{border-color:#bbb;}
        .rtq-msg-content{padding:3px 6px 6px 6px;}
    </style>
</head>
<body>
<div id="test"><input type="text" id="t"/></div>
    <script>
    
    var RTPopupMsgBox = function(position,interval,objName)
    {   var boxPosition = position;
        var msgBox;
        var msgButton;
        var interval = interval;
        var objName = objName;
        var createMsgbox = function()
          { var elm = document.createElement("div");
            msgBox = $(elm);
            msgBox.css({position:"absolute",left:boxPosition.left+"px",top:boxPosition.top+"px",width:boxPosition.width+"px",height:boxPosition.height+"px"});
            msgBox.addClass("rtm-msg");
            var elm2 = document.createElement("a");
            msgButton = $(elm2);
            $(elm2).css({position:"absolute",left:boxPosition.left+boxPosition.width-10+"px",top:boxPosition.top+2+"px",width:"10px",height:"10px"});
            $(elm2).addClass("rtm-remove");
            $(document.body).append(elm2);
            $(document.body).append(elm);
            msgButton.click(function(){destroyBox();})
          }
         this.show = function(msg)
         {msgBox.html(msg);
          msgBox.show();
          if(interval!=null&&interval>0) setTimeout(objName+".destroyBox()",interval);
         }
         this.destroyBox = destroyBox;
         function destroyBox()
         { msgBox.remove();
           msgButton.remove();
         }
          createMsgbox();
    }
    
    
    //test 
    var off = $("#test").offset(), w = $("#t").innerWidth(), h = $("#t").outerHeight();
    var pos = {left:off.left,top:off.top+h,width:w,height:200};
    var msg = new RTPopupMsgBox(pos,50000,"msg");
    msg.show("The first message!");
    document.oncontextmenu=function(){return false;}
 
     
    </script>
    
    <div class="rtq-msg">
        <div class="rtq-msg-wrap">
            <div class="rtq-msg-title">
                <strong>Message Title</strong>
                <a class="rtq-msg-close">Close</a>
            </div>
            <div class="rtq-msg-content">
                <p>Message. xxxxxxxxxxxxxxx. </p>
            </div>
        </div>
    </div>
</body>
  
</html>
